<template>
	<div>
		<a
			href="javascript:;"
			@click="setFilter('all')"
			:class="{ active: $store.state.filter === 'all' }"
			>All</a
		>
		<a
			href="javascript:;"
			@click="setFilter('finished')"
			:class="{ active: $store.state.filter === 'finished' }"
			>Finished</a
		>
		<a
			href="javascript:;"
			@click="setFilter('unfinished')"
			:class="{ active: $store.state.filter === 'unfinished' }"
			>Unfinished</a
		>
	</div>
</template>

<script setup>
// 任何模板中中都可以使用 $store
// mutations 中的 setFilter 则需要调用 commit

import { useStore } from '@/vuex'

const store = useStore()

const setFilter = (filter) => {
	// 直接在组件中调用 mutation
	store.commit('setFilter', filter)
}
</script>

<style lang="scss" scoped>
a {
	margin-right: 15px;

	&.action {
		text-decoration: none;
		color: #000;
	}
}
</style>
